<template>
    <div>
        <Row class="margin-top-10" :gutter="10">
            <Col :md="24" :lg="24">
                 <Card>
                    <p slot="title" class="card-title">
                        <Row class="" :gutter="10">
                            <Col :md="4" :lg="2">
                                <div style="margin-top: 2px;">
                                    <Icon type="ios-pulse"></Icon>
                                    {{this.$route.meta.title}}
                                </div>
                            </Col>
                            <Col :md="20" :lg="22">

                            </Col>
                        </Row>
                    </span>
                    <div class="line-chart-con">
                        <div style="">
                            <Form :model="formItem" :label-width="120">
                                <FormItem label="APP版本：">
                                    <Input v-model="formItem.app_version.value" @on-blur="setSysconf(formItem.app_version)" placeholder="请输入APP版本号" style="width:400px;"></Input>
                                </FormItem>
                                <!-- <FormItem label="APP版本：">
                                    {{formItem.app_version}}
                                </FormItem> -->
                                <!-- <FormItem label="游戏信息版本：">
                                    {{formItem.game_info_version}}
                                </FormItem> -->
                                <FormItem label="APP下载地址：">
                                    <Input v-model="formItem.app_down_url.value" @on-blur="setSysconf(formItem.app_down_url)" placeholder="请输入APP下载地址" style="width:400px;"></Input>
                                </FormItem>
                                <FormItem label="在线客服设置：">
                                    <Input v-model="formItem.kf_url.value" @on-blur="setSysconf(formItem.kf_url)" placeholder="请输入在线客服" style="width:400px;"></Input>
                                </FormItem>
                                <FormItem label="反水全局设置：">
                                    <!-- <Input v-model="formItem.noRebate_at_win" placeholder="Enter something..."></Input> -->
                                    <ButtonGroup shape="circle">
                                        <Button :type="formItem.noRebate_at_win.value==true?'primary':'ghost'" @click="noRebate">单边</Button>
                                        <Button :type="formItem.noRebate_at_win.value==false?'primary':'ghost'" @click="noRebate">双边</Button>
                                    </ButtonGroup>
                                </FormItem>
                                <FormItem label="公告弹出：">
                                    <i-Switch size="large" v-model="formItem.notice_read.value" @on-change="setSysconf(formItem.notice_read)">
                                        <span slot="open">ON</span>
                                        <span slot="close">OFF</span>
                                    </i-Switch>
                                </FormItem>
                                <FormItem label="赔率降点：">
                                    <Input number v-model="formItem.odds_proportion.value.pro" @on-blur="setSysconf(formItem.odds_proportion)" placeholder="请输入pro" style="width:120px;float: left;margin-left: 10px;">
                                        <span slot="prepend">降点比例</span>
                                    </Input>
                                    <Input number v-model="formItem.odds_proportion.value.start" @on-blur="setSysconf(formItem.odds_proportion)" placeholder="请输入start" style="width:120px;float: left;margin-left: 10px;">
                                        <span slot="prepend">初始额度</span>
                                    </Input>
                                    <Input number v-model="formItem.odds_proportion.value.add" @on-blur="setSysconf(formItem.odds_proportion)" placeholder="请输入add" style="width:120px;float: left;margin-left: 10px;">
                                        <span slot="prepend">间隔额度</span>
                                    </Input>
                                    
                                </FormItem>
                                <Alert type="error"><span style="margin-left: 10px;">提醒：当投注金额超过<span style="color: red;">初始额度</span>时,开始降低赔率（<span style="color: red;">降点比例</span>）,以后,当投注金额增加至<span style="color: red;">间隔额度</span>,则持续降低赔率（<span style="color: red;">降点比例</span>）<span style="color: red;">“如有疑问请咨询技术提供商”</span></span></Alert>
                                <FormItem label="用户注册协议：">
                                    <Button type="primary" @click="edit">编辑</Button>
                                </FormItem>
                                
                                <FormItem label="默认推荐码：">
                                    <Input v-model="formItem.sys_normal_r_code.value" @on-blur="setSysconf(formItem.sys_normal_r_code)" placeholder="请输入默认推荐码" style="width:400px;"></Input>
                                </FormItem>
                                <FormItem label="站点logo：">
                                    <div style="width: 375px;">
                                        <Upload
                                            multiple
                                            type="drag"
                                            :before-upload="handleUpload"
                                            action="//jsonplaceholder.typicode.com/posts/">
                                            <div style="padding: 0px 0;height: 158px;overflow: hidden;">
                                                <Icon type="ios-cloud-upload" size="52" style="color: #3399ff;position: absolute;left: calc(50% - 26px);top: calc(50% - 26px);z-index: 2;"></Icon>
                                                <img :src="thisfile" class="imgm" alt="">
                                                <!-- <img :src="file" class="imgm" alt="" v-if="file!==null"> -->
                                                <p style="position: absolute;top: 0px;background: #000000b5;color: #fff;width: 100%;height: 100%;z-index: 1;line-height: 230px;" v-if="file==null" >上传图片</p>
                                                <p style="position: absolute;top: 0px;background: #000000b5;color: #fff;width: 100%;height: 100%;z-index: 1;line-height: 230px;" v-if="file!==null" >{{file.name}}</p>
                                            </div>
                                        </Upload>
                                        <Alert type="warning"><span style="margin-left: 10px;">提醒：图片尺寸支持<span style="color: red;">1366*768</span></span></Alert>
                                    </div>
                                </FormItem>
                            </Form>
                        </div>
                    </div>
                </Card>
            </Col>   
        </Row>
        <Modal
            v-model="editModal"
            title="用户注册协议"
            width="750"
            @on-ok="editOk"
            @on-cancel="editCancel">
            <textarea id="articleAddor"></textarea>
        </Modal>
    </div>
</template>
<style lang="less" scoped>
     // .ivu-form-item{
    //     margin-bottom:0px;
    // }
    .imgm{
        width: 375px;
        height: 160px;
    }
    .ivu-card-head-inner, .ivu-card-head p{
        height: auto;
        overflow: inherit;
        
    }
    .page-margin-top{
        margin-top:10px;
    }
    .ivu-modal-wrap{
        display: flex;
        align-items: center;
        justify-content: center;

        .ivu-modal{
            top: 0;
        }
        
    }
</style>

<script>
import tinymce from 'tinymce';

export default {
    components: {
        
    },
    // inject: ['reload'],
    data () {
        return {
            editModal:false,
            file:null,
            thisfile:'',
            formItem:{
                app_down_url:{
                    id:0,
                    key:'',
                    value:''
                },
                app_version:{
                    id:0,
                    key:'',
                    value:''
                },
                game_info_version:{
                    id:0,
                    key:'',
                    value:''
                },
                kf_url:{
                    id:0,
                    key:'',
                    value:''
                },
                noRebate_at_win:{
                    id:0,
                    key:'',
                    value:''
                },
                notice_read:{
                    id:0,
                    key:'',
                    value:''
                },
                odds_proportion:{
                    id:0,
                    key:'',
                    value:{
                        pro:0.00,
                        start:500,
                        add:1000
                    }
                    
                },
                sys_normal_r_code:{
                    id:0,
                    key:'',
                    value:''
                },
                user_reg_txt:{
                    id:0,
                    key:'',
                    value:''
                },
                site_name:{
                    id:0,
                    key:'',
                    value:''
                },
                site_logo:{
                    id:0,
                    key:'',
                    value:''
                },
            },
            data:[]
        }
    },
    computed: {
        
    },
    methods: {
        init(){
            this.getSysconf()
        },
        handleUpload (file) {
            this.file = file;
            this.addok()
            return false;
        },
        addok(){
            let form = new FormData();
            form.append("site_logo", this.file);
            this.$api.repeater(this,'addLogo',form).then(res=>{
                if(res.success==true){
                    this.thisfile = `${this.$api.base}${res.info.value}?t=${Math.random()}`
                    this.$Notice.success({
                        title: '上传成功',
                    });
                }else{
                    this.$Notice.error({
                        title: '上传失败',
                        desc: res.error
                    });
                }
            })
        },
        isJSON_test(str) {
            if (typeof str == 'string') {
                try {
                    var obj=JSON.parse(str);
                    return obj;
                } catch(e) {
                    return str;
                }
            }
        },
        edit(){
            this.editModal=true
            tinymce.get('articleAddor').setContent(this.formItem['user_reg_txt'].value)
        },
        editOk(){
            let data={
                id:this.formItem['user_reg_txt'].id,
                key:'user_reg_txt',
                value:tinymce.get('articleAddor').getContent()
                // value:d.value
            }
            this.setSysconf(data)
        },
        editCancel(){
            
        },
        noRebate(){
            this.formItem.noRebate_at_win.value=!this.formItem.noRebate_at_win.value
            this.setSysconf(this.formItem.noRebate_at_win)
        },
        cData(arr){
            for(let i=0;i<arr.length;i++){
                this.formItem[arr[i].key].id=arr[i].id
                this.formItem[arr[i].key].key=arr[i].key
                // this.formItem[arr[i].key].value=this.isJSON_test(arr[i].value)
                this.formItem[arr[i].key].value=this.isJSON_test(arr[i].value)
                if(arr[i].key=='site_logo'){
                    this.thisfile = `${this.$api.base}${arr[i].value}`
                }
            }
        },
        setSysconf(d){
            let data={
                id:d.id,
                key:d.key,
                value:this.isJSON(d.value)
                // value:d.value
            }
            this.$api.repeater(this,'setSysconf',data).then(res=>{
                if(res.success==true){
                        if(d.key=='user_reg_txt'){
                            this.formItem['user_reg_txt']=d
                            this.$Notice.success({
                                title: '修改成功',
                            });
                        }
                    }else{
                        this.$Notice.error({
                            title: '修改失败',
                            desc: res.error
                        });
                    }
                
            })
        },
        isJSON(str){
            if (typeof str !== 'string') {
                try {
                    var obj=JSON.stringify(str);
                    return obj;
                } catch(e) {
                    return str;
                }
            }else{
                return str;
            }
        },
        getSysconf(){
            this.$api.repeater(this,'getSysconf').then(res=>{
                if(res.data==null){
                    this.data={}
                }else{
                    this.cData(res.data)
                }
            })
            // this.$api.getSysconf().then(response=>{
            //     response.json().then(responseJson=> {
            //         if(responseJson.data==null){
            //             this.data={}
            //         }else{
            //             this.cData(responseJson.data)
            //         }
            //     })
            // })
        }
    },
    mounted (){
        
        tinymce.init({
            selector: '#articleAddor',
            branding: false,
            elementpath: false,
            height: 400,
            language: 'zh_CN.GB2312',
            menubar: 'edit insert view format table tools',
            theme: 'modern',
            plugins: [
                'advlist autolink lists link image charmap print preview hr anchor pagebreak imagetools',
                'searchreplace visualblocks visualchars code fullpage',
                'insertdatetime media nonbreaking save table contextmenu directionality',
                'emoticons paste textcolor colorpicker textpattern imagetools codesample'
            ],
            toolbar1: ' newnote print preview | undo redo | insert | styleselect | forecolor backcolor bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image emoticons media codesample',
            autosave_interval: '20s',
            image_advtab: true,
            table_default_styles: {
                width: '100%',
                borderCollapse: 'collapse'
            }
        });
        this.init()
    },
    created (){
        
        
    }
};
</script>
